<template>
    <div v-if="infoobj" class="detail">
        <!-- 面包屑 -->
        <DetailBrand :category="infoobj.categories" :name="infoobj.name"></DetailBrand>
        <!-- 商品基本信息区 -->
        <div class="goods-info">
            <div class="media">
                <goodsImage :imgarr="infoobj.mainPictures" />
                <goodsSales></goodsSales>
            </div>
            <div class="spec">
                <goodsName :infoobj="infoobj"></goodsName>
                <goodssku :specs="infoobj.specs" :skus="infoobj.skus"></goodssku>
            </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRecommend :relevantlist="relevantlist"></GoodsRecommend>
        <!-- 商品详情 -->
        <GoodsParticulars @go2="go2" :details="goodslist.details" :hotlist1="hotlist1" :hotlist2="hotlist2" :evaluatelist="evaluatelist" :evaluatelist2="evaluatelist2"></GoodsParticulars>
        <!-- 注意事项 -->
        <goodsAttention></goodsAttention>
    </div>
</template>


<script>
import DetailBrand from '@/components/Detail/DetailBrand.vue'
import { getDetail ,getgoods,gethot} from '@/Api/detail'
import { getRelevant } from '@/Api/detail'
import goodsImage from './goodsImage.vue'
import goodsSales from './GoodsSales.vue'
import goodsName from './GoodsName.vue'
import GoodsRecommend from "@/components/Detail/GoodsRecommend.vue";
import goodsAttention from '@/components/Detail/GoodsAttention.vue'
import GoodsParticulars from "@/components/Detail/GoodsParticulars.vue";
import qs from "querystring";
import goodssku from '@/components/Detail/GoodsSku.vue'
export default {
    components: { DetailBrand,goodssku, goodsImage,goodsSales ,goodsName,GoodsRecommend,goodsAttention,GoodsParticulars},
    data() {
        return {
            infoobj: {},
            goodslist: [],
            relevantlist:[],

            hotlist1: [],
			hotlist2: [],
			evaluatelist: [],
			evaluatelist2: [],
			query: {
				page: 1,
				pageSize: 10,
			},
        }
    },
    methods: {
        async getDetails() {
            let { data: res } = await getDetail(this.$route.query.id)
            this.infoobj = res.result
            // console.log(this.infoobj);
        },
        async xuan(id) {
			let { data } = await getgoods(id);
			this.goodslist = data.result;
		},
        async xuan1(id) {
			var arr = {
				id: id,
				limit: 16,
			};
			let { data:res } = await getRelevant(arr);
			this.relevantlist = res.result;
		},
        // 评论分类
		async xuan3(id) {
			let { data } = await this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate`);
			this.evaluatelist = data.result;
		},
		async xuan4(id) {
			let { data } = await this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate/page?${qs.stringify(this.query)}`);
			this.evaluatelist2 = data.result;
		},
		// 点击评论
		go2() {
			this.xuan3(this.$route.query.id);
			this.xuan4(this.$route.query.id);
		},
        // 热销榜
		async xuan2(id) {
			var arr = {
				id: id,
				limit: 3,
				type: 1,
			};
			let { data: res } = await gethot(arr);
			this.hotlist1 = res.result;
			var arr1 = {
				id: id,
				limit: 3,
				type: 2,
			};
			let { data: res1 } = await gethot(arr1);
			this.hotlist2 = res1.result;
		},
    },
    mounted() {
        this.getDetails()
        this.xuan(this.$route.query.id);
        this.xuan1(this.$route.query.id);
        this.xuan2(this.$route.query.id);
       
    }
}
</script>

<style lang="scss" scoped>
.detail{
    width: 1240px;
    margin: auto;
}
.basic {
    background: #fff;
}

.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
    }

    .spec {
        flex: 1;
        padding: 30px 30px 30px 0;
    }
}
</style>